<template>
  <div>

    <el-form ref="form" :model="book" label-width="80px">

      <el-form-item label="书名">
        <el-input v-model="book.bookName"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="book.author"></el-input>
      </el-form-item>

      <el-form-item label="出版社">
        <el-input v-model="book.publisher"></el-input>
      </el-form-item>

      <el-form-item label="价格">
        <el-input v-model="book.price"></el-input>
      </el-form-item>
      <el-form-item label="库存量">
        <el-input v-model="book.count"></el-input>
      </el-form-item>
      <el-form-item label="版本号">
        <el-input v-model="book.version"></el-input>
      </el-form-item>
      <el-form-item label="图书评分">
        <el-rate
            v-model="book.rate"
            show-text>
        </el-rate>
      </el-form-item>
      <el-form-item label="图书种类">
        <el-radio-group v-model="book.bookType">
          <el-radio  v-for="item in typeList"   :label="item.id" >{{item.typename}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8080/upload"
          multiple
          :on-success="uploadImage">
        <img :src="book.bookImage" alt="">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>



      <div>
        <el-button type="primary" v-if="typeof (this.updateBook) == 'undefined'"  @click="addBook">添加</el-button>

        <el-button type="primary" v-if="typeof (this.updateBook) != 'undefined'" @click="updateBookByCommit">修改</el-button>
      </div>
    </el-form>
  </div>
</template>


<script>
import {listSearch} from "@/config/mixin/searchMixin";


export default {
  props: ['updateBook'],
  mixins:[listSearch],
  data() {
    return {
      typeList:[],
      book:{
        bookName:"",
        author:"",
        version:"",
        publisher:"",
        price:10.00,
        count:500,
        bookType:3,
        bookImage:"https://liuxingphoto.oss-cn-shenzhen.aliyuncs.com/2022-12-10/617b989f-deee-4115-bffb-d5e22d877d6a.png",
        rate:4
      }
    }
  },

  created() {
    this.getTypeList();
  },
  methods: {
    // 修改书籍的方法
    updateBookByCommit(){
      let params = {
        url:'book',
        method:'put',
        data:{
          id:this.updateBook.id,
          bookName:this.book.bookName,
          author:this.book.author,
          version:this.book.version,
          publisher:this.book.publisher,
          price:this.book.price,
          count:this.book.count,
          bookType:this.book.bookType,
          bookImage:this.book.bookImage,
        }
      }

      this.sendReq(params,res => {
        console.log(res)
        this.$message("修改成功");
        this.$emit('update',1);
      })
    },
    setUpdateBook(){
      if(typeof (this.updateBook) != 'undefined'){
          this.book = this.updateBook;
      }
    },
    uploadImage(response,file,fileList){
      this.book.bookImage = response
    },
    addBook(){
      let params = {
        url:'book',
        data:this.book
      }

      this.sendReq(params,res => {
         console.log(res)
        this.$message("添加成功")
      })

    },
    getTypeList() {
        let params = {
          url:'type',
          method:'get',
        }

        this.sendReq(params,res => {
          console.log(res);
          this.typeList = res.data.records
        })
    }
  },

}
</script>

<style lang="scss" scoped>

</style>
